<template>
  <div class="seoContener">
    <div class="obstacleproducing">
  <!--   <p>
        <span class="title-h1">SEO</span>
        <span class="title-h2">定制难题</span>
        <span class="title-icon ml-4"></span>
      </p>
      <p class="title-en">obstacle on seo producing</p> -->
	  <img
	    src="@/assets/image/SEOcustomer/img／tab03／title／obstacle@2x.png"
	    alt=""
		style="width: 268px;height:88px;object-fit: cover;"
	  />
	  <div class="title-disc">
	 新网站没流量？老网站权重提升慢？优质内容产出难？你需要系统化SEO定制服务。根据您业务特性量身定制，及时根据搜索引擎的算法和规则调整策略，专业团队保障内容品质，助力您的网站快速触达更多客户。</div>
      <div class="image-list mt-40">
        <div class="bosdwer">
          <img
            src="@/assets/image/SEOcustomer/tab03／ obstacleCard／A@2x.png"
            alt=""
          />
        </div>
        <div class="bosdwer">
          <img
            src="@/assets/image/SEOcustomer/tab03／ obstacleCard／B@2x.png"
            alt=""
          />
        </div>
        <div class="bosdwer">
          <img
            src="@/assets/image/SEOcustomer/tab03／ obstacleCard／C@2x.png"
            alt=""
          />
        </div>
        <div class="bosdwer">
          <img
            src="@/assets/image/SEOcustomer/tab03／ obstacleCard／D@2x.png"
            alt=""
          />
        </div>
      </div>
      <div class="choose-img">
        <img src="@/assets/image/SEOcustomer/tab03／redSlogan@2x.png" alt="" />
      </div>
    </div>
    <div class="platforme-advantage">
		<div class="flex" style="justify-content: center;align-items: center;flex-direction: column;">
		<!-- 	<p>
			    <span class="title-h1">平台</span>
			    <span class="title-h2">优势</span>
			    <span class="title-icon ml-4"></span>
			  </p>
			  <p class="title-en">our advantages</p> -->
			  <img
			    src="@/assets/image/SEOcustomer/img／common／title／advantages@2x.png"
			    alt=""
			  		style="width:184px;height:88px;object-fit: cover;"
			  />
			  <div class="title-disc" style="width: 1000px;letter-spacing: 0.5px;">
			作为手握几大高权重网站的实力运营团队，我们有着丰富的从0到1的建站经验帮您完成企业网推第一步，快速迭代迅速提升权重的技巧方案助力您的网站进入目标客户视野，6年以上从业经验的资深内容团队帮您高效完成内容运营。我们将为您提供系统性SEO整合方案，助力您的企业加速发展。
			</div>
		</div>
      <ul class="advantage-list">
        <li class="mt-24" v-for="item in advantageList" :key="item.titleEn">
          <p class="advatage-disc">{{ item.disc }}</p>
          <span class="icon"></span>
          <div class="title-info">
            <h3>{{ item.title }}</h3>
            <p class="item-title-en mt-4">{{ item.titleEn }}</p>
            <p class="item-title-brif mt-12">{{ item.brif }}</p>
          </div>
          <div class="more" @click="handleOpenChat">
            <div class="more-inner">
              More <el-icon size="12"><ArrowRightBold /></el-icon>
            </div>
          </div>
        </li>
      </ul>
      <div class="end-img">
        <img
          src="@/assets/image/situation.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ArrowRightBold } from "@element-plus/icons-vue";
import EventBus from "@/utils/eventBus.js";
const props = defineProps({
  chatInfo: {
    type: String,
    default: "",
  },
});
const handleOpenChat = () => {
  EventBus.emit("openCustomerChat", {
    message: props.chatInfo,
  });
};
const advantageList = [
  {
    disc: "通过多种关键词内容系统, 快速生成不同类型内容页, 覆盖更多长尾关键词.",
    title: "海量关键词优化",
    titleEn: "Keyword optimize",
    brif: "关键词 · 广泛覆盖",
  },
  {
    disc: "SEO优化核心技术能够轻松做到优化一个核心词, 匹配一批关键词到首页, 为网站带来更多高频流量！",
    title: "排名效果显著",
    titleEn: "Great effect",
    brif: "单对多优化 · 流量提升",
  },
  {
    disc: "费用远低于行业同类产品. 我们坚持用更低的成本实现更好的效果.",
    title: "成本费用更低",
    titleEn: "Lower costs",
    brif: "开销更少 · 效果更好",
  },
  {
    disc: "能够根据不同的搜索引擎的特征，进行针对性的关键词优化排名，关键词排名效果覆盖各大主流搜索引擎.",
    title: "效果覆盖广阔",
    titleEn: "Wider coverage",
    brif: "特征优化 · 全面覆盖",
  },
  {
    disc: "实时监测让您清晰了解SEO优化排名效果及费用支出情况，用户可随时查看关键词排名的实时数据, 方便快捷.",
    title: "实时监测",
    titleEn: "Real-time",
    brif: "实时数据 · 动态更新",
  },
];
</script>

<style lang="scss" scoped>
.seoContener {
  width: $aiseoHomeWidth;
  margin: 0 auto;
  margin-top: 80px;
  .title-disc{
    width: $aiseoHomeWidth;
    font-family: Alibaba PuHuiTi-Regular;
    font-weight: 400;
    font-size: 20px;
    color: #808080;
    line-height: 36px;
    text-align: center;
    margin-top: 40px;
    letter-spacing: 0.7;
      }
  p {
    .title-h1 {
      font-family: HelloFont WenYiHei, HelloFont WenYiHei;
      font-weight: 400;
      font-size: 48px;
      color: #1a1a1a;
    }
    .title-h2 {
      font-family: HelloFont WenYiHei, HelloFont WenYiHei;
      font-weight: 400;
      font-size: 32px;
      color: #1a1a1a;
    }
    .title-icon {
      display: inline-block;
      width: 16px;
      height: 4px;
      background: #e62e3d;
      border-radius: 0px 0px 0px 0px;
    }
  }
  .title-en {
    font-family: Poiret One;
    font-weight: 400;
    font-size: 24px;
    color: #1a1a1a;
  }
  .obstacleproducing {
    width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    .image-list {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .bosdwer {
        flex: 1;
        position: relative;
        img {
          width: 294px;
          height: 340px;
        }
        & + .bosdwer::before {
          content: "";
          display: inline-block;
          width: 2px;
          height: 40px;
          background: #cccccc;
          position: absolute;
          top: calc(50% - 20px);
          left: 0px;
        }
      }
    }
  }
  .platforme-advantage {
    width: 100%;
	// display: flex;
	// align-items: center;
	// justify-content: center;
	// flex-direction: column;
    margin-top: 150px;
    .title-disc{
      margin: 0 100px;
      margin-top: 32px;
    }
    .advantage-list {
      padding: 8px 37px 0 3px;
      box-sizing: border-box;
      > li {
        height: 185px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 40px 48px 40px 96px;
        box-sizing: border-box;
        border-radius: 24px 24px 24px 24px;
        position: relative;
        transition: all 0.5s;
        .more {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          opacity: 0;
          right: -200px;
          width: 94px;
          height: 46px;
          border-radius: 24px 24px 24px 24px;
          border: 2px solid #e62e3d;
          padding: 2px;
          box-sizing: border-box;
          cursor: pointer;
          transition: all 0.5s;
          &:hover {
            .more-inner {
              background: #e62e3d;
              color: #1a1a1a;
            }
          }
          .more-inner {
            width: 100%;
            height: 100%;
            font-family: HelloFont WenYiHei, HelloFont WenYiHei;
            font-weight: 400;
            font-size: 18px;
            color: #e62e3d;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 400;
            border-radius: 24px;
            .el-icon{
              transform: translateY(1px);
            }
          }
        }
        &:hover {
          border: 1px solid #e62e3d;
          box-sizing: border-box;
          padding-left: 40px;
          justify-content: flex-start;
          transition: all 0.5s;
          .title-info {
            margin-left: 40px;
          }
          .icon {
            display: none;
          }
          .more {
            opacity: 1;
            right: 40px;
            cursor: pointer;
            transition: all 0.5s;
          }
        }
        .advatage-disc {
          font-family: Alibaba PuHuiTi-Regular;
          font-weight: 400;
          font-size: 20px;
          color: #808080;
          width: 660px;
          line-height: 48px;
        }
        .icon {
          display: inline-block;
          width: 4px;
          height: 20px;
          background: #e62e3d;
          border-radius: 0px 0px 0px 0px;
        }
        .title-info {
          width: 240px;
          h3 {
            font-family: Alibaba PuHuiTi-Regular;
            font-weight: bold;
            font-size: 32px;
            color: #1a1a1a;
          }
          .item-title-en {
            font-family: Poiret One;
            font-weight: 400;
            font-size: 20px;
            color: #1a1a1a;
          }
          .item-title-brif {
            font-family: Alibaba PuHuiTi-Regular;
            font-weight: 400;
            font-size: 16px;
            color: #808080;
          }
        }
      }
    }
  }
  .choose-img {
    width: 100%;
    height: 180px;
    margin-top: 80px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .end-img {
    width: 100%;
    height: 80px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
